<template>
  <div class="promission">
    <a-table
      :columns="columns" 
      :data-source="tastList"
      :rowClassName="setHighLight"
    >
      <span slot="isLock" slot-scope="record">
        <a-popconfirm
          title="确认删除?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="remove(record)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import {
    getBlockPlanList,
    delBlockPlan
  } from '@/services/myDevice.js'
export default {
  name: 'Port',
  data() {
    return {
      columns: [
        {
          title: '被拉区块IP',
          dataIndex: 'sourceIP',
          key: 'sourceIP',
        }, {
          title: '回滚区块IP',
          dataIndex: 'targetIP',
          key: 'targetIP',
        }, {
          title: '任务创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
        }, {
          title: '操作（删除）',
          key: 'isLock',
          scopedSlots: { customRender: 'isLock' },
        }
      ],
      tastList: []
    }
  },
  computed: {
    ...mapGetters('account', ['user'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @desc 获取端口列表
     */
    getData() {
      const formData = new FormData()
      formData.append('userId', this.user.userId)
      getBlockPlanList(formData).then(res => {
        if(res.data.code == 200) {
          res.data.result.forEach(item => {
            item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm')
          })
          this.tastList = res.data.result
        }
      })
    },

    /**
     * @desc 设置表格高亮
     */
    setHighLight(record, index) {
        if(record.isLock == '1'){
          return "row-highLight"
        }else{
          return ''
        }
    },
    /**
     * @desc 删除
     */
    remove(record) {
      if(record.isLock == '1'){
          this.$message.warning("正在运行的任务无法回滚！")
          return false
        }
      const formData = new FormData()
      formData.append('planId', record.planId)
      delBlockPlan(formData).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.result)
          this.getData()
        } else {
          this.$message.warning(res.data.result)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .promission {
    background-color: @base-bg-color;
    padding: 24px;
    /deep/  .row-highLight{
      color: #13c2c2;
    }
  }
</style>